<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bilibili4</title>
    <link rel="stylesheet" href="./all.css">
    <script src="../font/iconfont.js"></script>
    <style>
        html{
            font-size: 62.5%;
        }
         body{
            margin-top: 25.5rem;
            margin-bottom: 5.5rem;
            background-color: rgb(241,242,244);
        }
        .bnav>li:nth-of-type(5) p{
            color: rgb(253,102,153);
        }

        .head{
            width: 100%;
            height: 4.5rem;
            display: flex;
            align-items: center;
            position: fixed;
            left: 0;
            top: 0;
            justify-content: flex-end;
            background-color: #fff;
        }
        .head>li>svg{
            font-size: 2.5rem;
            margin: 0 1rem;
        }
        .head_photo{
            width: 100%;
            height: 9rem;
            display: flex;
            align-items: center;
            position: fixed;
            left: 0;
            top: 4.5rem;
            background-color: #fff;
        }
        .head_photo>li{
            display: flex;
            align-items: center;
            margin-left: 1rem;
            flex-wrap: wrap;
        }
        .head_photo img{
            width: 6.5rem;
            height: 6.5rem;
            border-radius: 50%;
        }
        .head_photo p{
            font-size: 1.2rem;
            color: rgb(162,162,162);
        }
        .head_photo svg{
            font-size: 1.5rem;
            color: rgb(162,162,162);
        }
        .name{
            flex-grow: 1;
        }
        .name>div{
            width: 95%;
            display: flex;
            align-items: center;
            margin-left: .2rem;
        }
        .name>div:nth-of-type(1)>p{
            font-size: 1.8rem;
            color: #000;
        }
        .name>div:nth-of-type(1)>svg:nth-of-type(1){
            font-size: 2rem;
            margin-left: .5rem;
            color: rgb(96,170,255);
        }
        .name>div:nth-of-type(1)>svg:nth-of-type(2){
            font-size: 2.5rem;
            margin-left: .5rem;
            color: rgb(252,179,126);
        }
        .name>div:nth-of-type(2){
            justify-content: space-around;
            width: 24%;
            margin: .3rem .2rem;
            border: .1rem solid rgb(253,102,153);
            border-radius: .3rem;
        }
        .name>div:nth-of-type(2)>p{
            width: 100%;
            text-align: center;
            line-height: 1.7rem;
            color: rgb(253,102,153);
        }
        .name>div:nth-of-type(3)>p{
            font-size: 1.3rem;
            margin-right: .8rem;
        }
        .head_photo>li:nth-of-type(3){
            margin-left: 0;
            margin-right: 1rem;
            flex-wrap: nowrap;
            width: 19%;
        }
        .head_photo>li:nth-of-type(3)>p{
            font-size: 1.3rem;
            margin-right: .5rem;
        }
        .state{
            width: 100%;
            height: 6rem;
            display: flex;
            align-items: center;
            justify-content: space-around;
            position: fixed;
            left: 0;
            top: 13.5rem;
            background-color: #fff;
        }
        .state>div{
            width: 33%;
            position: relative;
        }
        .border{
            position: absolute;
            width: .1rem;
            height: 2rem;
            right: -.1rem;
            top: 1.1rem;
            background-color: #ccc;
        }
        .state p{
            font-size: 1.7rem;
            text-align: center;
        }
        .state>div>p:nth-of-type(2){
            font-size: 1.5rem;
            color: rgb(162,162,162);
        }
        .frame{
            width: 100%;
            height: 6rem;
            position: fixed;
            left: 0;
            top: 19.5rem;
            background: linear-gradient(rgb(255,255,255),rgb(255,255,255),rgb(254,231,237));
            display: flex;
            align-items: flex-end;
            justify-content: center;
        }
        .core{
            width: 90%;
            height: 90%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background-color: rgb(254,231,237);
            border-radius: .5rem .5rem 0 0 ;
            border: .1rem solid rgb(253,102,153);
            border-bottom: none;

        }
        .core p{
            color: rgb(253,102,153);
            font-size: 1rem;
        }
        .core p:nth-of-type(1){
            font-size: 1.6rem;
            font-weight: bold;
            margin-bottom: .3rem;
        }
        .core>div{
            width: 70%;
            margin-left: 1rem;
        }
        .core svg{
            color: rgb(253,102,153);
            margin-right: 1rem;

        }

        .function-list{
            height: 7rem;
            display: flex;
            align-items: center;
            justify-content: space-around;
            background-color: #fff;

        }
        
        .function-list>li{
            width: 20%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
        }
        .function-list svg{
            font-size: 2.5rem;
            color: rgb(49,157,219);
        }
        .function-list p{
            width: 100%;
            text-align: center;
            letter-spacing: .1rem;
            font-size: 1.2rem;
            margin-top: .5rem;
        }

        .reward{
            height: 10rem;
            background-color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .reward>div{
            height: 6.8rem;
            width: 90%;
            display: flex;
            align-items: center;
            justify-content: space-around;
            background: linear-gradient(90deg,rgb(255,255,255),rgb(255,255,255),rgb(254,231,237));
            border: .1rem solid rgb(253,102,153);
            border-radius: .5rem;
        }
        .reward>div>div{
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            margin-left: 1rem;
        }
        .reward>div>div:nth-of-type(1)>p{
            margin-top: .5rem;
            font-size: 1rem;
            color: rgb(146,153,161);
        }
        .reward>div>div>div{
            display: flex;
            align-items: center;
            
        }
        .reward>div>div>div>svg{
            color: rgb(253,102,153);
            font-size: 2.2rem;
        }
        .reward>div>div>div>p{
            margin-left: .5rem;
            font-weight: bold;
            font-size: 1.5rem;
        }
        .reward>div>div:nth-of-type(2){
            justify-content: space-around;
            width: 48%;
            height: 2.8rem;
            background-color: rgb(253,102,153);
            border-radius: 2rem;
            margin-right: 1.5rem;
        }
        .reward>div>div:nth-of-type(2)>p{
            color: #fff;
            flex-wrap: nowrap;
            font-size: 1.4rem;
            font-weight: bold;
            margin-right: .8rem;
            line-height: 2.8rem;
        }
        .reward>div>div:nth-of-type(2)>svg{
            color: #fff;
            font-size: 1.5rem;
            margin-left: .8rem;
            margin-bottom: .2rem;
        }

        .serv{
            height: 25rem;
            display: flex;
            align-items:flex-start;
            justify-content: space-around;
            flex-wrap: wrap;
            background-color: #fff;
        }
        .serv>p{
            height: 2rem;
            font-size: 1.4rem;
            font-weight: bold;
            letter-spacing: .1rem;
            width: 100%;
            height: 2rem;
            margin-left: 1rem;
            margin-top: 1rem;
        }
        .serv>ul{
            height: 21rem;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            flex-wrap: wrap;
        }
        .serv>ul>li{
            width: 25%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
        }
        .serv>ul>li>p{
            font-size: 1.2rem;
            width: 100%;
            text-align: center;
            margin-top: .5rem;
            letter-spacing: .1rem;
        }
        .serv>ul>li>svg{
            font-size: 3rem;
            color: rgb(253,102,153);
        }

        .more{
            height: 24rem;
            background-color: #fff;
        }
        .more>p{
            height: 3rem;
            font-size: 1.4rem;
            font-weight: bold;
            line-height: 3rem;
            margin-left: 1rem;
        }
        .more li{
            height: 5rem;
            display: flex;
            align-items: center;
            margin-left: 2rem;
        }
        .more li>svg:nth-of-type(1){
            font-size: 3rem;
            color: rgb(253,102,153);
        }
        .more li>p{
            font-size: 1.4rem;
            flex-grow: 1;
            margin-left: 1rem;
            letter-spacing: .1rem;
        }
        .more li>svg:nth-of-type(2){
            font-size: 1.5rem;
            color: rgb(162,162,162);
            margin-right: 1rem;
        }

        body>p{
            font-size: 10rem;
        }
    </style>
</head>
<body>
    <ul class="head">
        <li>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-saomiao"></use>
            </svg>
        </li>
        <li>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-jingzi"></use>
            </svg>
        </li>
        <li>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-moonyueliang"></use>
            </svg>
        </li>
    </ul>

    <ul class="head_photo">
        <li>
            <img src="../img/bilibili1/liuhaizhu.jpg" alt="">
        </li>
        <li class="name">
            <div>
                <p>HHFanQie</p>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-nan"></use>
                </svg>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-icon-test1"></use>
                </svg>
            </div>
            <div>
                <p>正式会员</p>
            </div>
            <div>
                <p>B币:</p>
                <p>0.0</p>
                <p>硬币:</p>
                <p>392</p>
            </div>
        </li>
        <li>
            <p>空间</p>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-jiantouyou"></use>
            </svg>
        </li>
    </ul>
    <div class="state">
        <div>
            <p>8</p>
            <p>动态</p>
            <div class="border"></div>
        </div>
        <div>
            <p>62</p>
            <p>关注</p>
            <div class="border"></div>
        </div>
        <div>
            <p>0</p>
            <p>粉丝</p>
        </div>
    </div>

    <div class="frame">
        <div class="core">
            <div>
                <p>成为大会员</p>
                <p>了解更多权益</p>
            </div>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-jiantouyou"></use>
            </svg>
        </div>
    </div>

    <ul class="function-list">
        <li>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-daoruweixuanzhong"></use>
            </svg>
            <p>离线缓存</p> 
        </li>
        <li>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-lishiguiji"></use>
            </svg>
            <p>历史记录</p> 
        </li>
        <li>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-31shoucang"></use>
            </svg>
            <p>我的收藏</p> 
        </li>
        <li>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-shaohouguankan"></use>
            </svg>
            <p>稍后观看</p> 
        </li>
    </ul>


    <div class="reward">
        <div>
            <div>
                <div>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-UPzhu"></use>
                    </svg>
                    <p>发布你的第一个视频</p>
                </div>
                <p>领限定头像挂件，赢活动奖金</p>
            </div>
            <div>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-shangchuan2"></use>
                </svg>
                <p>有奖发布</p>
            </div>
        </div>
    </div>
    <div class="serv">
        <p>推荐服务</p>
        <ul>
            <li>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-biaoqiankuozhan_kecheng-136-copy"></use>
                </svg>
                <p>我的课程</p>
            </li>
            <li>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-line-simcardsimka-02"></use>
                </svg>
                <p>免流量服务</p>
            </li>
            <li>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-jingzi-copy"></use>
                </svg>
                <p>个性装扮</p>
            </li>
            <li>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-qianbao-"></use>
                </svg>
                <p>我的钱包</p>
            </li>
            <li>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-youxiji"></use>
                </svg>
                <p>游戏中心</p>
            </li>
            <li>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-gouwudai"></use>
                </svg>
                <p>会员购中心</p>
            </li>
            <li>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-diannao"></use>
                </svg>
                <p>直播中心</p>
            </li>
            <li>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-bulb"></use>
                </svg>
                <p>创作中心</p>
            </li>
            <li>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-luntan"></use>
                </svg>
                <p>反馈论坛</p>
            </li>
            <li>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-liwu-copy"></use>
                </svg>
                <p>充能领福利</p>
            </li>
        </ul>
    </div>

    <div class="more">
        <p>更多服务</p>
        <ul>
            <li>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-kefu"></use>
                </svg>
                <p>19001010112杨博文</p>
                <svg class="icon jiantou" aria-hidden="true">
                    <use xlink:href="#icon-jiantouyou"></use>
                </svg>
            </li>
            <li>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-heiban-copy-copy"></use>
                </svg>
                <p>课堂模式</p>
                <svg class="icon jiantou" aria-hidden="true">
                    <use xlink:href="#icon-jiantouyou"></use>
                </svg>
            </li>
            <li>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-yusan"></use>
                </svg>
                <p>青少年模式</p>
                <svg class="icon jiantou" aria-hidden="true">
                    <use xlink:href="#icon-jiantouyou"></use>
                </svg>
            </li>
            <li>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-shezhi"></use>
                </svg>
                <p>设置</p>
                <svg class="icon jiantou" aria-hidden="true">
                    <use xlink:href="#icon-jiantouyou"></use>
                </svg>
            </li>
        </ul>
    </div>

    <ul class="bnav">
        <li>
            <a href="./bilibili1.html">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-wode"></use>
                </svg>
                <p>首页</p>
            </a>
        </li>
        <li>
            <a href="./bilibili2.html">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-dongtai"></use>
                </svg>
                <p>动态</p>
            </a>
        </li>
        <li>
            <a href="#">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-checkbox-plus-full-copy"></use>
                </svg>
            </a>
        </li>
        <li>
            <a href="./bilibili3.html">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-gouwudai"></use>
                </svg>
                <p>会员购</p>
            </a>
        </li>
        <li>
            <a href="./bilibili4.html">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-wodewo-copy"></use>
                </svg>
                <p>我的</p>
            </a>
        </li>
    </ul>
</body>
</html>